<template>
  <div>
    <a-row>
      <a-col :span="24">
        已拨打603通电话，目前第158名，距离上一名相差5通。<a-button size="small" type="primary" ghost @click="$router.push({ path: '/calls' })">详情</a-button>
      </a-col>
      <a-col :span="24">
        <v-chart ref="callChart" :width="1500" :height="400" :data="callData" :scale="scale">
          <v-tooltip />
          <v-axis />
          <v-legend />
          <v-line position="month*called" color="#ff5500" />
          <v-line position="month*uncall" />
        </v-chart>
      </a-col>
    </a-row>
  </div>
</template>

<script>
const callData = [
  { month: '1月', called: 7.0, uncall: 3.9 },
  { month: '2月', called: 6.9, uncall: 4.2 },
  { month: '3月', called: 9.5, uncall: 5.7 },
  { month: '4月', called: 14.5, uncall: 8.5 },
  { month: '5月', called: 18.4, uncall: 11.9 },
  { month: '6月', called: 80, uncall: 15.2 },
  { month: '7月', called: 25.2, uncall: 17.0 },
  { month: '8月', called: 26.5, uncall: 16.6 },
  { month: '9月', called: 23.3, uncall: 14.2 },
  { month: '10月', called: 18.3, uncall: 10.3 },
  { month: '11月', called: 13.9, uncall: 6.6 },
  { month: '12月', called: 9.6, uncall: 4.8 }
]

const scale = [
  {
    dataKey: 'month'
  },
  {
    dataKey: 'called',
    alias: '接通'
  },
  {
    dataKey: 'uncall',
    alias: '未接通'
  }
]

export default {
  name: 'Call',
  data () {
    return {
      callData,
      scale
    }
  }
}
</script>

<style scoped>

</style>
